<template>
	<view class="coverFull" style="background: #1F232F;">
		<vs-nav-bar background="#010c2b" title="跃赏学堂" light></vs-nav-bar>
		<view class="wraper" style="transform: translateY(20%);">
			<view>
				<vs-ratio-view ratio="5/4">
					<vs-swiper  @change="change" @click="fnItemClick"  mode="card" :list="imglist.map(v=>v.filePath)"></vs-swiper>
				</vs-ratio-view>
			</view>
			<view class="hart-w" @click="handleSetLoveInfo()">
				<vs-img-icon :size="50" url="/static/img/ic_xin.png"></vs-img-icon>
				<text class="goodnum">{{imglist[activeIndex].goodNo}}</text>
			</view>
			<text class="name">{{name}}</text>
		</view>
		
	</view>

</template>

<script>
	import {getPeopleList,setLoveInfo} from '@/api/homeapi'
	export default{
		data(){
			return{
				imglist:[],
				name:'',
				activeIndex:0
			}
		},
		onLoad() {
			this.fngetPeopleList()
		},
		methods:{
			fnItemClick(e){
				this.$Router.push({name:'person_detail',params:{info:this.imglist[e.index]}})
			},
			handleSetLoveInfo(e){
				setLoveInfo({refId:this.imglist[this.activeIndex].id}).then(res=>{
					if(res.code==='1'){
						this.imglist[this.activeIndex].isUp= 1
						this.imglist[this.activeIndex].goodNo++
					}else{
						this.$fn.toast(res.description)
					}
				})
			},
			fngetPeopleList(){
				getPeopleList({school:'ys',page:1,rows:99999}).then(res=>{
					console.log(res);
					res.data.forEach(v=>v.filePath = this.$Store.baseUrl + v.filePath)
					this.imglist = res.data
					this.name = res.data[0].name				})
			},
			change(e){
				this.activeIndex = e.detail.current
				setTimeout(()=>{
					this.name = this.imglist[e.detail.current].name
				},300)
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.wraper{
		width: 100%;
		
		.hart-w{
			left: 50%;
			transform: translateX(-50%);
			position: absolute;
			bottom: -110px;
			.goodnum{
				width: 100%;
				color: #fff;
				position: absolute;
				z-index: 5;
				margin: 0 auto;
				bottom: -30px;
				display: flex;
				justify-content: center;
				
			}
		}
		.name{
			color: #fff;
			position: absolute;
			z-index: 5;
			margin: 0 auto;
			left: 50%;
			top: -30px;
			transform: translateX(-50%);
		}
	}
</style>
